<template>
  <div class="home">
    <header>
      商品列表
    </header>
   <ul class="tab">
     <li v-for="(item,index) in list" :key="index" :class="{active:checkIndex==index}" @click="checkIndex=index">{{item.name}}</li>
   </ul>
   <ol>
     <li v-for="(item,index) in list[checkIndex]?.child" :key="index">
       <img src="../assets/logo.png" alt="">
       <section>
         <h5>{{item.name}}</h5>
         <p>￥{{item.price}}</p>
         <div>
           <span>{{item.payNum}}人付款</span>
           <button @click="jump(item)">+</button>
         </div>
       </section>
     </li>
   </ol>
  </div>
</template>

<script>
import axios from 'axios';
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
  name: 'Home',
  components: {

  },
  setup() {
    const list = ref([]);
    const store = useStore();
    const router = useRouter();
    const checkIndex = ref(0);
    axios.get('data.json').then(res => {
      list.value = res.data;
    })

    const jump = (val) => {
      store.commit('saveCart', val);
      router.push('/about');
    }
    return{
      list,
      checkIndex,
      jump
    }
  }
}
</script>
<style lang="scss" scoped>
  .home{
    height: 100%;
    header{
      line-height: 45px;
      text-align: center;
    }
    .tab{
      display: flex;
      height: 50px;
      align-items: center;
      background: #584483;
      color: #fff;
      li{
        width: 20%;
        text-align: center;
        line-height: 50px;
      }
      .active{
        background: #8d58f6;
      }
    }
    ol>li{
      display: flex;
      padding: 10px;
      margin-bottom: 10px;
      img{
        width: 80px;
      }
      section{
        flex: 1;
        margin-left: 10px;
        p{
          color: #8d58f6;
          margin: 10px 0;
        }
        button{
          float: right;
          border: none;
          padding: 3px 8px;
          border-radius: 5px;
          background: #8d58f6;
          color: #fff;
        }
      }
    }
  }
</style>
